<template>
	<view>
		<view class="chapter" v-if="data.length>0 && !loading && !error">
		<navigator v-for="(v,k) in data" :key="k" :url="'/pages/secret/secretView?id='+v.s_id" open-type="navigate">
			<view class="c_list" >
				<view class="c_left">
					<view class="name">
						<view class="title">{{ v.s_name }}</view>
					</view>
					<view class="time">
						课程数量：{{ v.s_chapterNUm }}章
					</view>
				</view>
				<view class="c_right">
					<view class="c_btn">前往</view>
				</view>
			</view>
		</navigator>
		</view>
		
		<view class="lay_view" v-else-if="loading">
			<view><text class="message">加载中</text><u-loading mode="circle" size="30"></u-loading></view>
		</view>
		
		<view class="lay_view" v-else-if="error">
			<view><text class="message">加载失败,点我重试</text></view>
		</view>
		
		<view class='empty' v-else>
			<view class='error'>您还没有已购买的课程</view>
			<view class='btn' @click='onRelease'>前往选课</view>
			
		</view>
	
		<view v-if="end" class="lay_view">
			<view><text class="message">我也是有底线的哦~</text></view>
		</view>
		
		
		<!--跳发布动态页 dynamicRelease.vue-->
	</view>
</template>

<script>
	export default{
		data(){
			return{
				list:[
					
				],
				data:[],
				page: 1,
				loading:false,
				error:false,
				end:false
			}
		},methods:{
			onRelease(){
				uni.navigateTo({
				    url: '/pages/secret/secret',
				    animationType: 'pop-in',
				    animationDuration: 200
				});
			},
			getData(){
				
				if(this.loading || this.end){
					return false
				}
				
				let that = this
				
				this.loading = true
				
				this.error = false
				
				this.$request({
					url:'/Secret/my_data',
					data:{page:that.page},
					method:'post',
					success(res){
						
						if(res.statusCode==200){
							if(res.data.code==1){
								
								for(var i in res.data.data.data){
									
									that.data.push(res.data.data.data[i])
									
								}
								
								if(res.data.page<res.data.allpage){
										
									that.page = res.data.page+1
								
								}else{
									that.end=true
								}
								
							}else{

								if(res.data.code==101 || res.data.code==102 || res.data.code==103){
									
									uni.reLaunch({
										url:'/pages/login/login'
									})
									
								}else{
									
									that.$refs.uToast.show({
										title: res.data.msg,
										type: 'warning'
									})
									
									that.error = true
								}
								
							}
						}else{
							that.$refs.uToast.show({
								title: '网络繁忙~',
								type: 'warning'
							})
							
							that.error = true
						}
					},
					fail(){
						that.$refs.uToast.show({
							title: '数据获取失败',
							type: 'warning'
						})
						
						that.error = true
					},
					complete(){
						that.loading = false
						
						uni.stopPullDownRefresh()
					}
				})
			}
		},
		onLoad(){
			
			if(!this.$store.state.Authorization){
				uni.reLaunch({
					url:'/pages/login/login'
				})
			}
			
			this.getData()
		},
		onReachBottom(){
			this.getData()
		},
		onPullDownRefresh(){
			
			this.data=[]
			
			this.page=1
			
			this.end=false
			
			this.getData()
		}
	}
</script>

<style scoped>
	.lay_view{
		font-size: 30rpx;
		color:#666;
		text-align: center;
		padding: 10rpx 0;
	}
	.lay_view .message{
		margin-right:5rpx;
	}
	.border{
		border-top:1px solid #F2F2F2;
	}
	.empty{
		width:100%;
		padding:100rpx 0;
		text-align: center;
		border-top:1px solid #F2F2F2;
	}
	.empty .error{
		font-size:34rpx;
		padding:30rpx 0;
	}
	.empty .btn{
		width:200rpx;
		padding:20rpx 30rpx;
		border-radius:40rpx;
		margin:auto;
		background-color: #EA4389;
		color:#fff;
	}
	.chapter{
		padding:0rpx 20rpx;
		border-top:1px solid #F2F2F2;
	}
	.chapter .c_list{
		border-bottom:1px solid #F2F2F2;
		display:flex;
	}
	.chapter .c_list .c_left{
		flex:1;
		padding:20rpx 0;
	}
	.chapter .c_list .c_left .name{
		display:flex;
		font-size:34rpx;
		padding:20rpx 0;
	}
	.chapter .c_list .c_left .name view.title{
		width:400rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.chapter .c_list .c_left .time{
		color:#888;
	}
	.chapter .c_list .c_right{
		width:130rpx;
		display: flex;
		align-items: center;
	}
	.chapter .c_list .c_right .c_btn{
		padding:10rpx 20rpx;
		background:#EA4389;
		color:#fff;
		font-size:28rpx;
		text-align: center;
		border-radius: 60rpx;
		flex:1;
	}
</style>
